/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import {Enhance as FormItem} from '../form-item';

@FormItem({
  type: 'matrix',
  validateSchema: 'http://amis.baidu.com/schemas/form.json#/definitions/formItem'
})
export default class MatrixCheckbox extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    source: PropTypes.string,
    columns: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired
    })),
    rows: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired
    }))
  };

  static defaultProps = {
    columns: [],
    rows: [],
    wrapperClassName: 'b-a'
  };

  constructor(props) {
    super(props);


    this.state = {
      columns: props.columns,
      rows: props.rows
    };

    if (props.sourceLocalData) {
      this.state = {
        columns: props.sourceLocalData.columns,
        rows: props.sourceLocalData.rows
      };
    }

    this.toggleItem = this.toggleItem.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const props = this.props;

    if (props.sourceFetching && !nextProps.sourceFetching && nextProps.sourceData) {
      const sourceData = nextProps.sourceData;
      this.setState({
        columns: sourceData.columns,
        rows: sourceData.rows
      });

      this.props.setValue(sourceData.value || buildDefaultValue(sourceData.columns, sourceData.rows));
    }

    if (props.columns !== nextProps.columns || props.rows !== nextProps.rows) {
      this.setState({
        columns: nextProps.columns,
        rows: nextProps.rows
      });
    }

    if (props.sourceLocalData !== nextProps.sourceLocalData) {
      const sourceLocalData = nextProps.sourceLocalData;
      this.setState({
        columns: sourceLocalData.columns,
        rows: sourceLocalData.rows
      });
    }
  }

  toggleItem(checked, x, y) {
    const {
      columns,
      rows
    } = this.state;

    const value = this.props.getValue() || buildDefaultValue(columns, rows);
    value[x][y] = assign({}, value[x][y], {
      checked
    });

    this.props.setValue(value.concat());
  }

  renderInput() {
    const {
      columns,
      rows
    } = this.state;
    const {
      rowLabel,
      wrapperClassName
    } = this.props;

    const value = this.props.getValue() || buildDefaultValue(columns, rows);

    return (
      <div className={wrapperClassName}>
        <table  className="table table-striped m-b-none">
          <thead>
            <tr>
              <th>{rowLabel}</th>
              {columns.map((column, x) => (
                <th key={x} className="text-center" style={{width: 150}}>{column.label}</th>
              ))}
            </tr>
          </thead>
          <tbody>
          {rows.map((row, y) => (
            <tr key={y}>
              <td>{row.label}{row.description || row.desc ? (
                <span className="m-l-xs text-muted text-xs">{row.description || row.desc}</span>
              ) : null}</td>
              {columns.map((column, x) => (
                <td key={x} className="text-center">
                  <label className="i-checks m-b-none">
                    <input type="checkbox" checked={value[x][y].checked} onChange={e => this.toggleItem(e.currentTarget.checked, x, y)} /><i />
                  </label>
                </td>
              ))}
            </tr>
          ))}
          </tbody>
        </table>
      </div>
    );
  }

  render() {
    const {
      inputClassName,
    } = this.props;

    return (
      <div key="input" className={inputClassName}>{this.renderInput()}</div>
    );
  }
}

function buildDefaultValue(columns, rows) {
  return columns.map(column => rows.map(row => assign({}, column, row, {
    checked: false
  })));
}
